/**
 * 2. 调节方式-调度图
 */

var xunPictureSet = [
	{id: 0, index1: '洪门水库', index2: "resources/images/wateroptimum/schemechart.png", index4:92, index5:104, index3: [{
        name: 'I区',
        data: [100, 100, {
        	y: 100,
            dataLabels: {
            	enabled: true,
            	y: 40,
            	format: '{series.name}',
            	style: {fontSize: '18px', fontWeight: 'normal'}
            }
        }, 100, 100, 99, 99, 100, 100, 100, 100, 100],
        fillOpacity: 0,
        dashStyle: 'dash'
    }, {
        name: 'II区',
        data: [96, 96, 96, {
        	y: 96,
            dataLabels: {
            	enabled: true,
            	y: 40,
            	format: '{series.name}',
            	style: {fontSize: '18px', fontWeight: 'normal'}
            }
        }, 96, 95, 95, 96, 96, 96, 96, 96],
        fillOpacity: 0,
        dashStyle: 'dash'
    }]},
	{id: 1, index1: '廖坊水库', index2: "resources/images/wateroptimum/schemechart.png", index4:61, index5:68, index3: [{
        name: 'I区',
        data: [65, 65, {
        	y: 65,
            dataLabels: {
            	enabled: true,
            	y: 40,
            	format: '{series.name}',
            	style: {fontSize: '18px', fontWeight: 'normal'}
            }
        }, 65, 65, 64, 64, 65, 65, 65, 65, 65],
        fillOpacity: 0,
        dashStyle: 'dash'
    }, {
        name: 'II区',
        data: [63, 63, 63, {
        	y: 63,
            dataLabels: {
            	enabled: true,
            	y: 40,
            	format: '{series.name}',
            	style: {fontSize: '18px', fontWeight: 'normal'}
            }
        }, 63, 63, 63, 63, 63, 63, 63, 63],
        fillOpacity: 0,
        dashStyle: 'dash'
    }]}
];

var xunPictureSet2 = [
	{id: 0, index1: '洪门水库', index2: "app/view/waterOptimum/schemechart.png", index3: [{
        name: 'I区',
        data: [10000, 10000, {
        	y: 10000,
            dataLabels: {
            	enabled: true,
            	y: 40,
            	format: '{series.name}',
            	style: {fontSize: '18px', fontWeight: 'normal'}
            }
        }, 10000, 10000, 8000, 8000, 10000, 10000],
        fillOpacity: 0,
        dashStyle: 'dash'
    }, {
        name: 'II区',
        data: [8000, 8000, 8000, {
        	y: 8000,
            dataLabels: {
            	enabled: true,
            	y: 40,
            	format: '{series.name}',
            	style: {fontSize: '18px', fontWeight: 'normal'}
            }
        }, 8000, 7000, 7000, 8000, 8000],
        fillOpacity: 0,
        dashStyle: 'dash'
    }, {
        name: 'III区',
        data: [6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000, 6000],
        fillOpacity: 0
    }, {
        name: 'IV区',
        data: [4000, 4000, 4000, 4000, 4000, 4000, 4000, 3000, 3000],
        fillOpacity: 0
    }, {
        name: 'V区',
        data: [2000, 2000, 2000, 2000, 2000, 1500, 1500, 1800, 1800],
        fillOpacity: 0
    }, {
        name: 'VI区',
        data: [1000, 1000, 1000, 1000, {
            y: 1000,
            dataLabels: {
            	enabled: true,
            	y: 40,
            	format: '{series.name}',
            	style: {fontSize: '18px', fontWeight: 'normal'}
            }
        }, 1000, 1000, 1000, 1000],	        
        fillOpacity: 0
    }]},
	{id: 1, index1: '廖坊水库', index2: "app/view/waterOptimum/schemechart.png", index3: [{
        name: 'I区',
        data: [1000, 1000, {
        	y: 1000,
            dataLabels: {
            	enabled: true,
            	y: 40,
            	format: '{series.name}',
            	style: {fontSize: '18px', fontWeight: 'normal'}
            }
        }, 1000, 1000, 800, 800, 1000, 1000],
        fillOpacity: 0,
        dashStyle: 'dash'
    }, {
        name: 'II区',
        data: [800, 800, 800, {
        	y: 800,
            dataLabels: {
            	enabled: true,
            	y: 40,
            	format: '{series.name}',
            	style: {fontSize: '18px', fontWeight: 'normal'}
            }
        }, 800, 700, 700, 800, 800],
        fillOpacity: 0,
        dashStyle: 'dash'
    }, {
        name: 'III区',
        data: [600, 600, 600, 600, 600, 600, 600, 600, 600],
        fillOpacity: 0
    }, {
        name: 'IV区',
        data: [400, 400, 400, 400, 400, 400, 400, 300, 300],
        fillOpacity: 0
    }, {
        name: 'V区',
        data: [200, 200, 200, 200, 200, 150, 150, 180, 180],
        fillOpacity: 0
    }, {
        name: 'VI区',
        data: [100, 100, 100, 100, {
            y: 100,
            dataLabels: {
            	enabled: true,
            	y: 40,
            	format: '{series.name}',
            	style: {fontSize: '18px', fontWeight: 'normal'}
            }
        }, 100, 100, 100, 100],	        
        fillOpacity: 0
    }]}
];

var xunChartCurrent = 0;
var xunChartStep = 190;
var xunChartMin = 0 - (xunChartStep * (xunPictureSet.length - 3));
var xunChartMax = 0;
var xunSchedulingChart;

function xunUpPage(){
	if(xunChartMin >= 0)return ;
	xunChartCurrent = xunChartCurrent - xunChartStep;
	if(xunChartCurrent < xunChartMin)xunChartCurrent = xunChartMin;
	$('#movepanel').animate({top: xunChartCurrent + 'px'},"slow");
}

function xunDownPage(){
	if(xunChartMin >= 0)return ;
	xunChartCurrent = xunChartCurrent + xunChartStep;
	if(xunChartCurrent > xunChartMax)xunChartCurrent = xunChartMax;
	$('#movepanel').animate({top: xunChartCurrent + 'px'},"slow");
}

function xunChartscrollpanelString(){
	var output = '';
	output += '<div style="background-color:#ddebf7;height:100%;margin-left:20px;margin-right:20px;width:240px;padding: 0px 0 0px 0;">';
	output += '<div style="height:20px;width:240px;cursor: pointer;text-align: center;color: #FFFFFF;background-color: #c8e4fc;" onclick="xunDownPage()">▲</div>';
	output += '<div style="height:100%;width:240px;overflow: hidden;">';
	output += '<div id="movepanel" style="position: relative;">';
	
	output += singlexunChartscrollpanelString(xunPictureSet[0].id, xunPictureSet[0].index1, xunPictureSet[0].index2, true);
	for(var i=1;i<xunPictureSet.length;i++){
		output += singlexunChartscrollpanelString(xunPictureSet[i].id, xunPictureSet[i].index1, xunPictureSet[i].index2, false);
	}
	
	output += '</div>';
	output += '</div>';
	output += '<div style="height:20px;width:240px;cursor: pointer;text-align: center;color: #FFFFFF;background-color: #c8e4fc;" onclick="xunUpPage()">▼</div>';
	output += '</div>';
	return output;
}

function xunChartscrollpanelString2(){
	var output = '';
	output += '<div style="background-color:#ddebf7;height:100%;width:100%;padding: 0px 0px 0px 0px;overflow: hidden;">';
	
	output += '<div id="movepanel" style="position: relative;">';
	
	output += singlexunChartscrollpanelString(xunPictureSet[0].id, xunPictureSet[0].index1, xunPictureSet[0].index2, true);
	for(var i=1;i<xunPictureSet.length;i++){
		output += singlexunChartscrollpanelString(xunPictureSet[i].id, xunPictureSet[i].index1, xunPictureSet[i].index2, false);
	}
	
	output += '</div>';
	
	output += '</div>';
	return output;
}

function changexunSCpicture(id){
	var item;
	for(var i=0;i<xunPictureSet.length;i++){
		if(xunPictureSet[i].id == id){
			item = xunPictureSet[i];
		}
		document.getElementById('xunSClistitem'+i).style.backgroundColor = '#ddebf7';
	}
	document.getElementById('xunSCpictureTitle').innerHTML = item.index1;

	if(xunSchedulingChart != null)xunSchedulingChart.destroy();
	xunSchedulingChart = dispatchxunchart('xunchart4-schedulingChart', '水位过程图', item);
	
	document.getElementById('xunSClistitem'+id).style.backgroundColor = '#acb9ca';
}

function singlexunChartscrollpanelString(id, name, path, isHighlighted){
	var output = '';
	if(isHighlighted)output += '<div id="xunSClistitem'+id+'" style="width:240px;padding: 20px 20px 20px 20px; background-color:#acb9ca;">';
	else output += '<div id="xunSClistitem'+id+'" style="width:240px;padding: 20px 20px 20px 20px;">';
	output += '<div style="text-align:center;">';
	output += '<div style="font-size: 15px;font-weight:bold;height:30px;line-height:30px;background-color:#fce4d6;width:200px;">'+name+'</div>';
	output += '<img src="'+path+'" style="height:120px;width:200px;cursor: pointer;" onclick="changexunSCpicture('+id+')"/>';
	output += '</div>';
	output += '</div>';
	return output;
}

function replacexunChartScrollPanel(){
	Ext.getCmp('chartscrollpanel').setHtml(xunChartscrollpanelString());
	xunChartMin = 0 - (xunChartStep * (xunPictureSet.length - 3));
	changexunSCpicture(0);
	/*var link = "szy/dispatch/wateroptimum/schedulingChart";
	$.post(link,{},function(result){
		console.log(result);
		xunPictureSet = result;
		Ext.getCmp('chartscrollpanel').setHtml(xunChartscrollpanelString());
		xunChartMin = 0 - (xunChartStep * (xunPictureSet.length - 3));
		changexunSCpicture(0);
	});*/
}

function dispatchxunchart(element, title, data){
	return Highcharts.chart(element, {
	    chart: {
	        type: 'area'
	    },
	    title: {
	        text: null
	    },
	    xAxis: {
	        allowDecimals: false,
	        labels: {
	            formatter: function () {
	                return this.value + '月'; // clean, unformatted number for year
	            }
	        }
	    },
	    yAxis: {
	        title: {
	            text: '水位(m)'
	        },
	        labels: {
	            formatter: function () {
	                return this.value / 1 + '';
	            }
	        },
	        min: data.index4,
	        max: data.index5
	    },
	    legend: {
	    	enabled: false
	    },
	    tooltip: {
	    	headerFormat: null,
	        pointFormat: '{point.x}月 <br/>水位低于 <b>{point.y:,.0f}</b><br/>{series.name}出力 '
	    },
	    plotOptions: {
	        area: {
	            pointStart: 1,
	            marker: {
	                enabled: false,
	                symbol: 'circle',
	                radius: 2,
	                states: {
	                    hover: {
	                        enabled: true
	                    }
	                }
	            }
	        }
	    },
	    series: data.index3
	});
}

Ext.define('Admin.view.needwater.xunpack.subpage.schedulingChart',{
	extend:'Ext.panel.Panel',
	xtype:'xunSchedulingChart',
	//起别名
	alias:'xunSchedulingChart',
	require:[],
	user:[],
	userCLs:'big-100 small-100',
	layout: {
        type: 'hbox',
        align: 'stretch'
    },
	margin: '0 10 10 10',
	border: false,
	items:[{
		xtype: 'panel',
		layout: {
	        type: 'vbox',
	        align: 'stretch'
	    },
		region: 'center',
		items:[{
			region: 'north',
			height: 35,
			html: '<div id="xunSCpictureTitle" style="text-align: center;font-size: 16px;font-weight:bold;height:35px;line-height:35px;background-color:#fce4d6;">洪门水库</div>'
		},{
			region: 'center',
			html: '<div id="xunchart4-schedulingChart" style="width:500px; height:300px;"></div>',
			listeners: {
				resize: {
					fn: function(obj, width, height, eOpts){
					//	console.log(obj.getWidth()+"|"+obj.getHeight());
					//	console.log($("#xunchart4-schedulingChart").width()+"|"+$("#xunchart4-schedulingChart").height());
						$("#xunchart4-schedulingChart").width(width);
						$("#xunchart4-schedulingChart").height(height);
						xunSchedulingChart.reflow();
					}
				},
				boxready: {
					fn: function(obj, width, height, eOpts){
						$("#xunchart4-schedulingChart").width(width);
						$("#xunchart4-schedulingChart").height(height)
						xunSchedulingChart = dispatchxunchart('xunchart4-schedulingChart', '水位过程图', xunPictureSet[0]);
					//	console.log($("#xunchart4-schedulingChart").width()+"|"+$("#xunchart4-schedulingChart").height());
					}
				}
			},
			flex:1
		}] ,
		flex:1
	},{
		xtype: 'panel',
		layout: {
	        type: 'vbox',
	        align: 'stretch'
	    },
		width: 260,
		padding: '0 0 0 20',
		items:[{
			height: 20,
			html:'<div style="height:100%;width:100%;cursor: pointer;text-align: center;color: #FFFFFF;background-color: #c8e4fc;" onclick="xunDownPage()">▲</div>'
		},{
			flex:1,
			id: 'chartscrollpanel',
			html: xunChartscrollpanelString2()
		},{
			height: 20,
			html:'<div style="height:20px;width:240px;cursor: pointer;text-align: center;color: #FFFFFF;background-color: #c8e4fc;" onclick="xunUpPage()">▼</div>'
		}]
	}],
	listeners: {
		boxready: {
			fn: function(){
			//	replacexunChartScrollPanel();
			}
		}
	}	
});